/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/
function renderList() {
    axios({
        url: '/student/list',
        method: 'get',
    }).then(res => {
        //成功回调
        /* 封装渲染函数 */
        document.querySelector('tbody').innerHTML = res.data.data.map(item => `
            <tr>
            <th scope="row">${item.id}</th>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.sex}</td>
            <td>${item.group}</td>
            <td>${item.phone}</td>
            <td>${item.salary}</td>
            <td>${item.truesalary}</td>
            <td>${item.province + item.city + item.county}</td>
            <td>
              <button data-id="${item.id}" type="button" class="btn btn-primary btn-sm">修改</button>
              <button data-id="${item.id}" type="button" class="btn btn-danger btn-sm">删除</button>
            </td>
          </tr>`).join('')
    })
}
renderList()

//添加学员弹窗
document.querySelector('.btnAddStu').addEventListener('click', function () {
    document.querySelector('.addModalLabel').innerText = '录入新学员'
    document.querySelector('.btnAddStudent').innerText = '确认添加'
    $('#addModal').modal('show')
    getProvince()
})
//加载省数据
function getProvince() {
    axios({
        url: '/geo/province',
        method: 'get',
    }).then(res => {
        //成功回调
        /* 封装渲染函数 */
        document.querySelector('[name="province"]').innerHTML =
            `<option selected value="">--省--</option>` + res.data.map(item => `
            <option value="${item}">${item}</option>
            `).join('')
        getCity()
    })
}
//加载市数据
function getCity() {
    document.querySelector('[name="province"]').addEventListener('change', function () {

        document.querySelector('[name="county"]').innerHTML = `<option selected value="">--县--</option>`
        document.querySelector('[name="city"]').innerHTML = `<option selected value="">--市--</option>`

        const pname = document.querySelector('[name="province"]').value
        console.log(pname)
        axios({
            url: '/geo/city',
            method: 'get',
            params: { pname }
        }).then(res => {
            //成功回调
            document.querySelector('[name="city"]').innerHTML =
                `<option selected value="">--市--</option>` + res.data.map(item => `
            <option value="${item}">${item}</option>
            `).join('')
            getCounty()
        })
    })
}
//加载县数据
function getCounty() {
    document.querySelector('[name="city"]').addEventListener('change', function () {
        document.querySelector('[name="county"]').innerHTML = `<option selected value="">--县--</option>`
        const pname = document.querySelector('[name="province"]').value
        console.log(pname)
        axios({
            url: '/geo/county',
            method: 'get',
            params: {
                pname: document.querySelector('[name="province"]').value,
                cname: this.value
            }
        }).then(res => {
            //成功回调
            console.log(res)
            document.querySelector('[name="county"]').innerHTML =
                `<option selected value="">--县--</option>` + res.data.map(item => `
            <option value="${item}">${item}</option>
            `).join('')
        })
    })
}

document.querySelector('.btnAddStudent').addEventListener('click', function (e) {
    e.preventDefault()
    const fd = new FormData(document.querySelector('form'))
    console.log(fd)
    let obj = {}
    fd.forEach((item, index) => {
        obj[index] = item
    })
    if (Object.values(obj).some(item => item === '')) {
        return Toast.fail('输入不能为空')
    }
    let config = {}
    if (document.querySelector('.btnAddStudent').innerText === '确认添加') {
        config = {
            url: '/student/add',
            method: 'post',
            data: obj,
        }
    } else {
        config = {
            url: '/student/update',
            method: 'put',
            data: {
                ...obj,
                id: this.dataset.id
            }
            }
        }
        axios(config).then(res => {
            //成功回调
            console.log(res)
            if (res.data.code === 0) {
                Toast.success(res.data.message)
                $('#addModal').modal('hide')
                renderList()
            } else {
                Toast.success(res.data.message)
            }
        }).catch(err => {
            Toast.fail(err.response.data.message)
        })
    })

//删除学生数据
document.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.classList.contains('btn-danger')) {
        const id = e.path[2].querySelector('th').innerText
        axios({
            url: '/student/delete',
            method: 'delete',
            params: { id }
        }).then(res => {
            //成功回调
            console.log(res)
            if (res.data.code === 0) {
                Toast.success(res.data.message)
                renderList()
            } else {
                Toast.fail(res.data.message)
            }
        })
    }
})

// 修改学生数据模块(复用)
document.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.classList.contains('btn-primary')) {
        document.querySelector('.addModalLabel').innerText = '修改学员'
        document.querySelector('.btnAddStudent').innerText = '确认修改'
        $('#addModal').modal('show')
        $('#editModal').modal('show')
        getProvince()
        axios({
            url: '/student/one',
            method: 'get',
            params: { id: e.path[2].querySelector('th').innerText }
        }).then(res => {
            //成功回调
            console.log(res)
            document.querySelector('[name="name"]').value = res.data.data.name
            document.querySelector('[name="age"]').value = res.data.data.age
            document.querySelector('[name="group"]').value = res.data.data.group
            const nan = document.querySelectorAll('[name="sex"]')[0]
            const nv = document.querySelectorAll('[name="sex"]')[1]
            res.data.data.sex === '男' ? nan.checked = true : nv.checked = true
            document.querySelector('[name="phone"]').value = res.data.data.phone
            document.querySelector('[name="salary"]').value = res.data.data.salary
            document.querySelector('[name="truesalary"]').value = res.data.data.truesalary
            document.querySelector('[name="province"]').value = res.data.data.province

            document.querySelector('[name="city"]').innerHTML = `<option>${res.data.data.city}</option>`
            document.querySelector('[name="county"]').innerHTML = `<option>${res.data.data.county}</option>`
        })
        document.querySelector('.btnAddStudent').dataset.id = e.path[2].querySelector('th').innerText
    }
})

// // 修改学生数据模块(不复用)
// document.querySelector('tbody').addEventListener('click', function (e) {
//     if (e.target.classList.contains('btn-primary')) {
//         $('#editModal').modal('show')
//         getEditProvince()
//         axios({
//             url: '/student/one',
//             method: 'get',
//             params: { id: e.path[2].querySelector('th').innerText }
//         }).then(res => {
//             //成功回调
//             console.log(res)
//             document.querySelector('#editModal [name="name"]').value = res.data.data.name
//             document.querySelector('#editModal [name="age"]').value = res.data.data.age
//             document.querySelector('#editModal [name="group"]').value = res.data.data.group
//             const nan = document.querySelectorAll('#editModal [name="sex"]')[0]
//             const nv = document.querySelectorAll('#editModal [name="sex"]')[1]
//             res.data.data.sex === '男'?nan.checked = true : nv.checked = true
//             document.querySelector('#editModal [name="phone"]').value = res.data.data.phone
//             document.querySelector('#editModal [name="salary"]').value = res.data.data.salary
//             document.querySelector('#editModal [name="truesalary"]').value = res.data.data.truesalary
//             document.querySelector('#editModal [name="province"]').value = res.data.data.province

//             document.querySelector('#editModal [name="city"]').innerHTML = `<option>${res.data.data.city}</option>`
//             document.querySelector('#editModal [name="county"]').innerHTML = `<option>${res.data.data.county}</option>`
//         })
//         document.querySelector('#editModal .btnAddStudent').dataset.id = e.path[2].querySelector('th').innerText
//     }
// })
// // 加载省数据
// function getEditProvince() {
//     axios({
//         url: '/geo/province',
//         method: 'get',
//     }).then(res => {
//         //成功回调
//         /* 封装渲染函数 */
//         document.querySelector('#editModal [name="province"]').innerHTML =
//             `<option selected value="">--省--</option>` + res.data.map(item => `
//             <option value="${item}">${item}</option>
//             `).join('')
//         getCity()
//     })
// }
// //加载市数据
// function getCity() {
//     document.querySelector('#editModal [name="province"]').addEventListener('change', function () {

//         document.querySelector('#editModal [name="county"]').innerHTML = `<option selected value="">--县--</option>`
//         document.querySelector('#editModal [name="city"]').innerHTML = `<option selected value="">--市--</option>`

//         const pname = document.querySelector('#editModal [name="province"]').value
//         console.log(pname)
//         axios({
//             url: '/geo/city',
//             method: 'get',
//             params: { pname }
//         }).then(res => {
//             //成功回调
//             document.querySelector('#editModal [name="city"]').innerHTML =
//                 `<option selected value="">--市--</option>` + res.data.map(item => `
//             <option value="${item}">${item}</option>
//             `).join('')
//             getCounty()
//         })
//     })
// }
// //加载县数据
// function getCounty() {
//     document.querySelector('#editModal [name="city"]').addEventListener('change', function () {
//         document.querySelector('#editModal [name="county"]').innerHTML = `<option selected value="">--县--</option>`
//         const pname = document.querySelector('#editModal [name="province"]').value
//         console.log(pname)
//         axios({
//             url: '/geo/county',
//             method: 'get',
//             params: {
//                 pname: document.querySelector('#editModal [name="province"]').value,
//                 cname: this.value
//             }
//         }).then(res => {
//             //成功回调
//             console.log(res)
//             document.querySelector('#editModal [name="county"]').innerHTML =
//                 `<option selected value="">--县--</option>` + res.data.map(item => `
//             <option value="${item}">${item}</option>
//             `).join('')
//         })
//     })
// }

// document.querySelector('#editModal .btnAddStudent').addEventListener('click',function(e){
//     e.preventDefault()
//     const fd = new FormData(document.querySelector('#editModal form'))
//     const obj = {}
//     fd.forEach((item,index) => obj[index] = item)
//     if(Object.values(obj).some(item => item === ''))Toast.fail('表格不能为空')
//     axios({
//         url:'/student/update',
//         method:'put',
//         data: {
//             ...obj,
//             id:this.dataset.id
//         },
//     }).then(res=>{
//         //成功回调
//         console.log(res)
//         if(res.data.code === 0){
//             Toast.success(res.data.message)
//             $('#editModal').modal('hide')
//             renderList()
//         }else{
//             Toast.fail(res.data.message)
//         }
//     }).catch(err => {
//         Toast.fail(err.response.data.message)
//     })
// })
